import Title from "./title";
import { useState } from "react";
import { Button } from "antd";

export default function Home() {
  const [style, setStyle] = useState({
    color: "red",
  });

  const colors = ["blue", "pink", "grey", "yellow", "green"];

  const [title, setTitle] = useState("这是标题");

  const changeColor = () => {
    // 当前颜色
    const currentColor = style.color;

    // 过滤掉当前颜色，避免重复
    const availableColors = colors.filter((color) => color !== currentColor);

    // 随机选取一个不同于当前颜色的颜色
    const nextColor =
      availableColors[Math.floor(Math.random() * availableColors.length)];

    setStyle({
      color: nextColor,
    });
  };

  return (
    <div>
      <p>子组件</p>
      <Title title={title} style={style} setTitle={setTitle} />
      <p>父组件</p>
      <Button onClick={changeColor}>点击切换颜色</Button>
    </div>
  );
}
